<template>
	<div class="groupDetail">
		<div class="allMain" v-if='!showAllComment' :class='{allMainActive:download}'>
	        <div class="shopMess" id="shop" name='shop'>
	          <swiper :show-dots="false" v-model='currentIndex'>
	            <swiper-item class="black" v-for='(item,index) in shopMess.PHOTO_LIST' v-if='shopMess.PHOTO_LIST.length>0' :key='index'>
	              <div class="swiperItem">
	                 <img :src="shopMess.IMG_URL+item.IMG" alt="" />
	              </div>
	            </swiper-item>
	          </swiper>
	          <p class="index" v-if='shopMess.PHOTO_LIST'>{{(currentIndex+1)+"/"+shopMess.PHOTO_LIST.length}}</p>
	          <div class="groupLine">
	          	<div class="groupLineLeft">
	          		<h1>团购价</h1>
	          		<span>￥<label>{{shopMess.GROUPON_PRICE.split('.')[0]}}</label><span v-if='shopMess.GROUPON_PRICE.indexOf(".")>-1'>.{{shopMess.GROUPON_PRICE.split('.')[1]}}</span></span>
	          		<div class="priceNum">
	          			<h2>已团{{shopMess.SALE_COUNT}}件</h2>
						      <s>￥{{shopMess.ORIGINAL_PRICE}}</s>
	          		</div>
	          	</div>
	          	<div class="groupLineRight">
	          		<p>距团购结束还剩</p>
	          		<div class="times"><span v-if='downObj.day>0'>{{downObj.day}}天</span>{{downObj.H}} : {{downObj.M}} : {{downObj.S}}</div>
	          	</div>
	          </div>
	          <div class="shopName">
	            <h1>{{shopMess.SERV_SUBJECT}}</h1>
	            <p :class='{gray:shopMess.ZERO_STATUS==1}'>{{shopMess.REMARK}}</p>
              <div class="oldUser" v-if='shopMess.ZERO_STATUS==1'>
                老用户开团成功,此商品免单
              </div>
	          </div>
	          <div class="specifications" @click='selectRule'>
	            <p v-if='watchSelect.str==""'>请选择{{selectType}}</p>
	            <p v-if='watchSelect.str!=""'>已选择：{{watchSelect.str}}</p><span></span>
	          </div>
	        </div>
	        <div class="groupdetails">
	        	<div class="detailHeader">
	        		<h1>车网通拼团玩法</h1>
	        		<div class="headerR" @click='playDetail'>
	        			<span>玩法详情</span>
	        			<label></label>
	        		</div>
	        	</div>
	        	<div class="detailF">
	        		<img src="../assets/image/group/groupStep.png" alt="" />	        		
	        	</div>
	        </div>
	        <div class="groupList">
	        	<div class="listHeader">
	        		等你来凑
	        	</div>
	        	<groupUserList :userList='shopMess.GROUPON_USER_LIST' @group-pay='groupPay' type='1' v-if='shopMess.GROUPON_USER_LIST.length>0'></groupUserList>
            <div class="noGroupUser" v-if='shopMess.GROUPON_USER_LIST.length==0'>
              <img src="../assets/image/group/noGroupUser.png" alt="" />
              <p>赶快开团自己当团长哟！</p>
            </div>
	        	<div class="checkAll allComments" v-if='shopMess.GROUPON_USER_LIST.length==3' @click='checkAllUser'>
	        		查看全部拼团
	        	</div>
	        </div>
	        <!-- 评论 -->
          <div class="comments">
              <h1>全部评论({{shopMess.COMMENTS}})</h1>
              <div class="commentsItem" v-for='item in commentMess'>
               <div class="comHead">
                 <div class="star">
                  <span v-for='i in Math.ceil(item.SCORE)'></span>
               </div>
               <div class="userName">{{item.USER_NAME | fiterPhone}}</div>
              </div>
              <div class="comMain">
	              <div class="conTitle">
	                {{item.CONTENT}}
	              </div>
	              <div class="comImg">
	                <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
                  <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
                  <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
                  <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
	              </div>
	              <div class="replayCom" v-if='item.REPLY_CONTENT'>
	                <span></span>
	                {{item.REPLY_CONTENT}}
	              </div>
	            </div>
	            <div class="comFooter">
	              <p>{{item.CREATE_TIME | filterTimes}}</p>
	            </div>
	          </div>
          	<div v-if='commentMess.length==0' class="noComment">
	            <img src="../assets/image/carProduct/noComment.png" alt="" />
	            <p>暂无评论</p>
	            <p>购买后快来发表评论吧</p>
	          </div>
	          <div class="allComments" @click='goAllComment' v-if='commentMess.length>=3'>
	            查看更多评论
	          </div>
	        </div>
          <div class="drowRule" v-if='shopMess.GROUPON_TYPE==2' v-html='shopMess.PRIZE_HTML'>
            
          </div>
	        <!-- 商品详情 -->
	        <div class="detailMess" id="detail" name='detail'>
	          <p>向上拖动，查看更多图文详情</p>
	          <img src="../assets/image/carProduct/up.png" alt="" class="up" />
	          <div class="detailHtml" v-html='shopMess.SERV_DESC'></div>
	        </div>
    </div>
    <div class="footer" v-if='!showAllComment'>
        <a :href="'tel:'+shopMess.SERV_PHONE">
          <img src="../assets/image/carProduct/tel.png" alt="" />
        </a>
        <div class="shopCart" @click='goShopCart'>
          <img src="../assets/image/carProduct/shopCart.png" alt="" />
          <span :class='{circle1:shopNum<10,circle2:shopNum<100&&shopNum>=10,circle3:shopNum<1000&&shopNum>=100}' v-if='shopNum>0'>{{shopNum}}</span>
        </div>
        <div class="addShop" @click='goPayN' v-if='btnFlag==0'>
          <p>￥<span>{{(Number(shopMess.PRICE)+Number(watchSelect.sum)) |filterMoney}}</span>.{{(Number(shopMess.PRICE)+Number(watchSelect.sum)) |filterMoney1}}</p>
          <h1>单独购买</h1> 
        </div>
        <div class="toPay" @click='goPayG' v-if='(shopClass==1||shopClass==2)&&btnFlag==0'>
          <p>￥<span>{{(Number(shopMess.GROUPON_PRICE)+Number(watchSelect.sum)) |filterMoney}}</span>.{{(Number(shopMess.GROUPON_PRICE)+Number(watchSelect.sum)) |filterMoney1}}</p>
          <h1>{{shopMess.START_NUM}}人开团</h1> 
        </div>
        <div class="toPay noFree" @click='goPayG'  :class='{nohasGroupVoucher:hasGroupVoucher}' v-if='shopClass==3&&btnFlag==0'>
          <h1>免费开团</h1> 
        </div>
        <div class="toPay noFree noGroupVoucher" v-if='btnFlag==1'>
          <h1>已告罄</h1> 
        </div>
        <div class="toPay noFree noGroupVoucher" v-if='btnFlag==2'>
          <h1>已结束</h1> 
        </div>
    </div>
    <popup v-model="showPop">
      <div class="popRule">
        <div class="popHead">
          <div class="popHLeft" v-if='shopMess.PHOTO_LIST.length>0'>
            <img :src="shopMess.IMG_URL+shopMess.PHOTO_LIST[0].IMG" alt=""/>
          </div>
          <div class="popHCenter">
            <h1>￥{{Number(watchSelect.prices)}}</h1>
            <p v-if='watchSelect.str!=""'>已选择：{{watchSelect.str}}</p>
            <p v-if='watchSelect.str==""'>请选择商品的属性</p>
          </div>
          <div class="popHRight">
            <img src="../assets/image/carProduct/close.png" @click='closePop'/>
          </div>
        </div>
        <div class="popMain">
          <div class="rule" v-for='(items,index) in shopMess.ATTR_LIST'>
            <p>{{items.TYPE}}</p>
            <div class="ruleDetail">
              <span v-for='(itemss,indexs) in items.ATTRIBURE' :class='{activeSpan:itemss.IS_SELECT==1}' @click='selectClass(index,indexs)'>{{itemss.SERV_NAME}}</span>
            </div>
          </div>
          <div class="number" v-if='payClass==0'>
            <group>
              <x-number title="数量" :step="1" :min='1' v-model='number'></x-number>
            </group>
          </div>
        </div>
        <div class="popFooter" @click='determine'>
          {{popText}}
        </div>
      </div>
    </popup>
    <popup v-model="showAllUser" position='right' width='100%'>
      <div class="allGroupUser" v-if='showAllUser'>
        <x-header title="全部拼团" :left-options="{backText:'',preventGoBack:true}" class='whiteHeader' @click.native='closeAllUser'>
        </x-header>
        <div class="allUserList">
        <scroller :on-infinite="infinites" ref='myScroller'>
          <groupUserList :userList='userList' type='2'></groupUserList>
        </scroller>
        </div>
      </div>
    </popup>
    <toast v-model="showToast" type='text'>{{toastText}}</toast>
	</div>
</template>
<script>
import { XHeader,Swiper,SwiperItem,XNumber,Group,Popup,Toast} from 'vux';
import { setCookie, getCookie,isWeiXin,wXAuthJump,sendWXCodeOrOpenid,GetQueryString,clearCookie } from '../util/commonUtils';
import groupUserList from './group-user-list';  //团购组件
export default {
	name: "groupDetail",
	// 数据
	data() {

		return {
			userId: '',
			currentIndex:0,
			shopNum:0,  //购物车数量
			showPop:false,  //商品属性弹窗是否显示
			number:1,   //购买商品的数量
			popText:'去开团',
      showToast:false,//提示框显示隐藏
      toastText:'',
      downObj:{
        day:0,
        H:0,
        M:0,
        S:0
      },
      payClass:2,  //购买类型  0代表单独购买  1代表去凑团  2代表自己去开团
      PID:0,   //如果自己开团那么团id就为0  如果是去凑团那么就该团团长id
      showAllUser:false, //是否显示全部团购用户
      page:1,
      userList:[],  //该商品已经开的团
      btnFlag:0,  //按钮的类型  1代表已告罄  2表示已结束  0代表其他的
      closeTime:'',
      clickKey:false,  //点击开关
      hasGroupVoucher:false  //是否有免团券
 		}
	},
	props:['shopMess','showAllComment','download','commentMess','selectType','shopClass'],
	// 计算属性
	computed: {
		watchSelect(){
	      let arr=this.shopMess.ATTR_LIST;
	      let str='';
	      let sum=0;
        let prices=0;
	      let obj={};//加入购物车的数据
	      if(this.shopMess.ATTR_LIST){
	        obj.PARAMS=[];
	        let objs={};
	        objs.SHOP_NAME=this.shopMess.SHOP_NAME;
	        objs.SERV_ID=this.shopMess.SERV_ID;
	        objs.QUANTITY=this.number;
	        objs.COMP_ID=this.shopMess.COMP_ID;
	        objs.ATTR_LIST=[];
	        for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
	          for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
	            let objss={};
	            if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
	              objss.ATTRIBURE=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_ID;
	              objss.TYPE=this.shopMess.ATTR_LIST[i].TYPE;
	              objs.ATTR_LIST.push(objss);
	              str+='['+this.shopMess.ATTR_LIST[i].TYPE+']';
	              str+=this.shopMess.ATTR_LIST[i].ATTRIBURE[j].SERV_NAME+' ';
	              sum+=Number(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].PRICE);
	            }
	          }
	        }
          if(this.payClass==0){//单独购买
            objs.price=Number(this.shopMess.PRICE)+sum;
            prices=Number(this.shopMess.PRICE)+sum;
          }else{
            objs.price=Number(this.shopMess.GROUPON_PRICE)+sum;
            prices=Number(this.shopMess.GROUPON_PRICE)+sum;
          }
	        
	        obj.PARAMS.push(objs);
	      }
	      return {
	        str:str,
	        sum:sum,
          prices:prices,
	        addObj:obj
	      }
	    },
      //判断是否选择了所有的规格和属性
      allSelect(){
        let arr=this.shopMess.ATTR_LIST;
        let flag=false;
        if(this.shopMess.ATTR_LIST){
          if(this.shopMess.ATTR_LIST.length==0){
            return true;
          }
          for(let i=0;i<this.shopMess.ATTR_LIST.length;i++){
            for(let j=0;j<this.shopMess.ATTR_LIST[i].ATTRIBURE.length;j++){
              if(this.shopMess.ATTR_LIST[i].ATTRIBURE[j].IS_SELECT==1){
                flag=true;
              }
            }
            if(!flag){
              break;
            }
          }
          if(!flag){
            return false;
          }else{
            return true;
          }
        }
      }
	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
		if(this.userId){
			this.getShopCarNum();
		}
    //轮询订单的结束时间
    this.closeTime=setInterval(()=>{
      this.checkShop();
    },500);
    if(this.shopMess.GROUPON_STOCK==0){
      this.btnFlag=1;
    }
    if(sessionStorage.getItem('openGroups')&&!this.clickKey){
      this.clickKey=true;
      this.goPayG();
    }
    if(this.shopClass==3&&!sessionStorage.getItem('hasGroupVoucher')){
      this.hasGroupVoucher=true;
    }
	},
	// el被创建，并挂载到实例上
	mounted() {

	},
	// 方法（实例中的方法）-----------
	methods: {
    playDetail(){
      location.href='http://carnt.carnettong.com:8088/CARNT/GroupPlayDetail/GroupPlayDetail.html';
    },
		goAllComment(){
			this.$emit('show-allcomment',true);
		},
		//选择规格
    selectRule(){
      this.payClass=0;
      this.popText='单独购买';
      this.showPop=true;
    },
    //查看所有拼团用户
    checkAllUser(){
      this.showAllUser=true;
    },
    //关闭所有拼团用户
    closeAllUser(){
      this.showAllUser=false;
    },
	// index 是ATTR_LIST索引  indexs 是ATTRIBURE的索引
    selectClass(index,indexs){
        for(let j=0;j<this.shopMess.ATTR_LIST[index].ATTRIBURE.length;j++){
          this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[j],'IS_SELECT',0);
        }
        this.$set(this.shopMess.ATTR_LIST[index].ATTRIBURE[indexs],'IS_SELECT',1);
    },
	//获取购物车数量
    getShopCarNum(){
      this.$fetchPost('/ShoppingCartWeb/getShopCartCount.action',{USER_ID:this.userId}).then(res=>{
          if(res.STATUS_CODE==1){
            this.shopNum=res.SHOPPING_CART
          }
      },err=>{})
    },
    //确定购买
    determine(){
      // let flag=this.checkAdd();
      // if(!flag){
      //   this.showPop=true;
      //   return;
      // }//封装支付数据
      if(this.payClass==0){
        this.goPayN();
      }else if(this.payClass==1){
        this.groupPay(this.PID);
      }else if(this.payClass==2){
        this.goPayG();
      }
    },
    //去购物车
    goShopCart(){
      let that=this;
      if(!getCookie('loginkey')){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
      }else{
        this.$router.push('/shoppingCart');
      }
    },
    //检查单独购买和团购是否选择了属性
    checkAdd(){
      let that=this;
      if(!getCookie('loginkey')){//判断是否登录
        this.$vux.confirm.show({
          title:'提示',
          content:'请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return false;
      }
      if(this.shopMess.ATTR_LIST.length==0){//无属性列表
        return true;
      }
      if(this.allSelect){//判断是否选择了所有的属性和规格
        this.showPop=false;
        return true;
      }else{
        if(this.showPop){
          this.toastText='请选择商品属性';
          this.showToast=true;
        }else{
          this.showPop=true;
        }
        return false;
      }
    },
    //用户点击去凑团时
    groupPay(id){
      this.$router.push('/groupDetail/'+id);
    },
    //团购自己开团
    goPayG(){
      if(this.hasGroupVoucher){
        return;
      }
      if(this.shopClass==3&&sessionStorage.getItem('hasGroupVoucher')){
        sessionStorage.removeItem('cGroup');
      }
      let code = GetQueryString('code');
      let unionid=getCookie('_unionidpo_');
      if(isWeiXin()){
          let that=this;
          // 1.是微信环境下
          // 不存在openid 检查是否有code参数
          if ( code || unionid) {
            sendWXCodeOrOpenid.call(that).then(function (data) {
              // 储存code拉回的openid
              // alert(data.STATUS_CODE);
              if ( data.STATUS_CODE == 1) {
                //获取用户微信信息
                setCookie('_unionidpo_', data.AUTH_INFO.unionid);//用户的unionid
                setCookie("headerImg",data.AUTH_INFO.headimgurl);
                setCookie("userN",data.AUTH_INFO.nickname);
                sessionStorage.removeItem('openGroups');
                that.clickKey=false;
                if(data.IS_BINDING==0){
                  that.$router.push('/modifyGroup');
                }else if(data.USER_ID){
                  setCookie("userName",data.MOBILE);
                  setCookie("loginkey",data.USER_ID);
                  setCookie('CAR_ID',data.CAR_ID);
                  setCookie('INV_CODE',data.INV_CODE);
                  setCookie('INV_URL',data.INV_URL);
                  that.userId=data.USER_ID;
                  that.goPayGs();
                }
              }else if(data.STATUS_CODE == 2){
                sessionStorage.setItem('openGroups',1);
                clearCookie('_unionidpo_');
                let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID+'?groupId='+that.shopClass;
                wXAuthJump.call(that,urls);
              }
            })
          }
          // 不存在code也无openid
          else {
            sessionStorage.setItem('openGroups',1);//代表用户点击了开团按钮
            // 跳转微信授权地址 （之后再跳回页面，流程重头来过）
            let urls=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopDetail/'+that.shopMess.SERV_ID+'?groupId='+that.shopClass;
            wXAuthJump.call(that,urls);
          }
      }else{
        this.goPayGs();
      }
      
    },
    goPayGs(){
      this.payClass=2;
      this.popText='去开团';
      this.PID=0;
      let flag=this.checkAdd();
      if(!flag){
        this.showPop=true;
        return;
      }//封装支付数据
      let settleMess=this.encapsulateData();
      settleMess.ORDER_LIST[0].GROUPON_TYPE='17092852';
      settleMess.ORDER_LIST[0].GROUPON_TYPES=this.shopMess.GROUPON_TYPE;
      settleMess.ORDER_LIST[0].PID=this.PID;
      sessionStorage.removeItem('orderMess');
      sessionStorage.removeItem('distribuVoucher');
      localStorage.removeItem('from');
      sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
      //this.$router.push('/shopPay');
      location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
    },
    //购买商品,单独购买
    goPayN(){
      this.payClass=0;
      this.popText='单独购买';
      let flag=this.checkAdd();
      if(!flag){
        this.showPop=true;
        return;
      }
      let settleMess=this.encapsulateData();
      sessionStorage.removeItem('orderMess');
      sessionStorage.removeItem('distribuVoucher');
      localStorage.removeItem('from');
      sessionStorage.setItem('shopMess',JSON.stringify(settleMess));//商品支付的数据
      //this.$router.push('/shopPay');
      location.href=window.getIps+'/CARNT/jsp/pay/indexM.html#/shopPay';
    },
    encapsulateData(){
      let settleMess={};
      settleMess.USER_ID=this.userId;
      settleMess.ZERO_STATUS=this.shopMess.ZERO_STATUS;
      settleMess.ORDER_LIST=[];
      let objs={};
      objs.COMP_ID=this.watchSelect.addObj.PARAMS[0].COMP_ID;
      objs.SHOP_NAME=this.watchSelect.addObj.PARAMS[0].SHOP_NAME;
      objs.SERV_PARAMS=[];
      let objss={};
      objss.SERV_ID=this.watchSelect.addObj.PARAMS[0].SERV_ID;
      if(this.payClass==2){
        objss.QUANTITY=1;
      }else{
        objss.QUANTITY=this.watchSelect.addObj.PARAMS[0].QUANTITY;
      }
      objss.SERV_FIRST_CLASS=this.shopMess.SERV_FIRST_CLASS;
      objss.SERV_SECON_CLASS=this.shopMess.SERV_SECON_CLASS;
      objss.SUPP_CASH_VOL=this.shopMess.SUPP_CASH_VOL;
      objss.SUPP_DIS_VOL=this.shopMess.SUPP_DIS_VOL;
      objss.SUPP_NOR_CASH_VOL=this.shopMess.SUPP_NOR_CASH_VOL;
      objss.SERV_SUBJECT=this.shopMess.SERV_SUBJECT;//商品名称
      objss.PRICE=Number(this.watchSelect.prices);//商品价格
      objss.MARK=1;
      objss.ATTR_LIST=[];
      for(let i=0;i<this.watchSelect.addObj.PARAMS[0].ATTR_LIST.length;i++){
        let objAtr={};
        objAtr.ATTRIBURE=String(this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].ATTRIBURE);
        objAtr.TYPE=this.watchSelect.addObj.PARAMS[0].ATTR_LIST[i].TYPE;
        objss.ATTR_LIST.push(objAtr);
      }
      objs.SERV_PARAMS.push(objss);
      settleMess.ORDER_LIST.push(objs);
      return settleMess;
    },
    //轮询团购商品计算团购结束时间
    checkShop(){
        var times=new Date().getTime();
        let day=0;
        let H=0;
        let M=0;
        let S=0;
        if(times>=this.shopMess.END_DATE){
          // this.btnFlag=2;
          this.$vux.alert.show({
              title: '',
              content: '活动已经结束了',
              onHide () {
                location.reload();
              }
          })
          clearInterval(this.closeTime);
        }else{
          day=parseInt((this.shopMess.END_DATE-times)/(24*60*60*1000));
          H=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000)/(60*60*1000));
          M=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000-H*60*60*1000)/(60*1000));
          S=parseInt((this.shopMess.END_DATE-times-day*24*60*60*1000-H*60*60*1000-M*60*1000)/(1000));
          H=this.filterNum(H);
          M=this.filterNum(M);
          S=this.filterNum(S);
        }
        this.downObj={
          day:day,
          H:H,
          M:M,
          S:S
        }
    },
    filterNum(num){
      return num>=10?num:'0'+num
    },
    closePop(){
    	this.showPop=false;
    },
    //获取所有团购商品列表（第一次）
    getUserList(){
      this.$fetchPost('/Groupon/getGrouponLeaderByServDetailIdList.action',{
          PAGE_NO:this.page,
          PAGE_SIZE:10,
          SERV_ID:this.shopMess.SERV_ID
        }).then(res=>{
          if(res.STATUS_CODE==1){
            this.userList=res.GROUPON_USER_LIST;
            if(res.GROUPON_USER_LIST.length<10){
              this.$refs.myScroller.finishInfinite(2);
            }else{
              this.page++;
              this.$refs.myScroller.finishInfinite();
            }
          }
        },err=>{
          console.log(err);
        })
    },
    //上拉刷新
    getMordeUserList(){
      this.$fetchPost('/Groupon/getGrouponLeaderByServDetailIdList.action',{
        PAGE_NO:this.page,
        PAGE_SIZE:10,
        SERV_ID:this.shopMess.SERV_ID
      }).then(res=>{
          if(res.STATUS_CODE==1){
            this.userList=this.userList.concat(res.GROUPON_USER_LIST);
            if(res.GROUPON_USER_LIST.length<10){
              this.$refs.myScroller.finishInfinite(2);
            }else{
              this.page++;
              this.$refs.myScroller.finishInfinite();
            }
          }
        },err=>{
          console.log(err);
        })
    },
    infinites(){
      if(this.page==1){
       this.getUserList();
      }else{
       this.getMordeUserList();
      }
    },
    //点击图片全屏显示
    showImg (e) {
        var commentImgBg = document.createElement('div');
        commentImgBg.style.cssText = 'position: fixed;\
                                      top: 0;\
                                      left: 0;\
                                      right: 0;\
                                      bottom: 0;\
                                      z-index:999;\
                                      background-color: #000;';
        var commentImg = document.createElement('img');
        commentImg.style.cssText = 'width: 100%;\
                                    position: fixed;\
                                    left: 50%;\
                                    top: 50%;\
                                    -webkit-transform: translate(-50%,-50%);\
                                    transform: translate(-50%,-50%);'
        commentImg.src = e.target.src;
        commentImgBg.appendChild(commentImg);

        commentImgBg.onclick = function () {
          document.body.removeChild(commentImgBg)
        }
        document.body.appendChild(commentImgBg)
    }
	},
	// 子组件
	components: {
		XHeader,Swiper,SwiperItem,groupUserList,XNumber,Group,Popup,Toast
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../assets/css/public.less');
.groupDetail {
  .allGroupUser{
    height: 100%;
    overflow: scroll;
    background: #fff;
    min-height: 100%;
    .allUserList{
      padding: 0 0.2rem;
      background: #fff;
    }
  }
  .allMain{
    padding-top: 0.9rem;
    background: #fff;
    .groupList{
    	border-bottom: 0.18rem solid #efeff4;
    	.listHeader{
  			font-size: 0.3rem;
  			height: 0.8rem;
  			line-height: 0.8rem;
  			text-align: left;
  			padding-left: 0.2rem;
        color: #444;
  			.borderBFu(#ddd);
    	}
      .noGroupUser{
        padding: 0.3rem 0;
        img{
          width: 0.86rem;
          height: 0.86rem;
          display: block;
          margin: 0 auto;
        }
        p{
          font-size: 0.26rem;
          color: #999;
          padding: 0.3rem 0 0;
        }
      }
    }
    .groupdetails{
  		border-bottom:0.17rem solid #f0f0f3;
    	.detailHeader{
    		display: flex;
    		padding: 0 0.3rem 0 0.2rem;
    		height: 0.8rem;
    		align-items:center;
    		justify-content:space-between;
    		.borderBFu(#ddd);
    		h1{
    			font-size: 0.26rem;
    			color: #222;
    		}
    		.headerR{
    			display: flex;
	    		align-items:center;
    			span{
    				font-size: 0.24rem;
    				color: #999;
    				padding-right: 0.15rem;
    			}
    			label{
            width: 0.2rem;
            height: 0.2rem;
            transform:rotate(45deg);
            border: 0.02rem solid #414141;
            border-width:0.02rem 0.02rem 0 0;

          }
    		}
    	}
    	.detailF{
			padding: 0.4rem 0;
    		img{
    			width: 7.11rem;
    			height: 1.12rem;
    			display: block;
    			margin:0 auto;
    		}
    	}
    }
    .swiperItem{
      height:7.5rem;
      width: 7.5rem;
      img{
        width: 100%;
      }
    }
    .index{
      width: 0.76rem;
      height: 0.36rem;
      border-radius: 0.23rem;
      font-size: 0.28rem;
      color: #fff;
      background: rgba(0,0,0,.4);
      margin: -0.7rem auto 0;
      padding-top: 0.03rem;
      box-sizing: border-box;
      position: relative;
      z-index: 466;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .groupLine{
    	width: 7.5rem;
    	position: relative;
    	z-index: 222;
    	height: 1.0rem;
    	margin-top: 0.3rem;
    	padding: 0 0.2rem;
    	background: url(../assets/image/group/groupLogoBg.png) no-repeat;
    	background-size: 7.5rem 1.0rem;
    	display: flex;
    	justify-content:space-between;
    	align-items:center;
    	.groupLineLeft{
    		color: #fff;
    		display: flex;
    		align-items:center;
			h1{
				font-size: 0.30rem;
				font-weight: bold;
				padding-right: 0.1rem;
				padding-top: 0.05rem;
			}
			span{
				font-size: 0.36rem;
				font-weight: bold;
			}
			label{
				font-size: 0.50rem;
				font-weight: bold;
			}
			.priceNum{
				height: 1rem;
				width: auto;
				margin-left: 0.15rem;
				h2{
					font-size: 0.22rem;
					height: 0.33rem;
          display: flex;
          align-items:center;
          justify-content:center;
					width: auto;
          padding: 0 0.1rem;
          box-sizing: border-box;
					background: url(../assets/image/group/groupNum.png) no-repeat;
					background-size: 100% 0.33rem;
          margin: 0.17rem 0 0.14rem;
				}
				s{
					font-size: 0.22rem;
					margin-top: -0.2rem;
					padding-left: 0.15rem;
          line-height: 0.5rem;
          display: block;
          text-align: left;
				}
			}
    	}
    	.groupLineRight{
    		color: #fff;
    		padding: 0.1rem 0;
    		p{
				font-size: 0.22rem;
				height: 0.4rem;
				letter-spacing: 0.025rem;
    		}
    		.times{
				font-size: 0.24rem;
    		}
    	}
    }
    .shopName{
      position: relative;
      margin-top: 0.15rem;
      padding-bottom: 0.3rem;
      background: #fff;
      .oldUser{
        font-size: 0.26rem;
        color: #F22E2E;
        margin-top: 0.2rem;
      }
      h1{
        font-size: 0.32rem;
        color: #232326;
        padding: 0.22rem 0 0.18rem 0;
      }
      p{
        font-size: 0.26rem;
        color: #EC2121;
        padding: 0 0.2rem;
      }
      .gray{
        color: #888;
      }
    }
    .specifications{
      display: flex;
      justify-content:space-between;
      padding: 0 0.3rem 0 0.2rem;
      align-items:center;
      height: 1rem;
      border-bottom: 0.15rem solid #f0f0f3;
      .borderTFu(#ede9e9);
      p{
        font-size: 0.26rem;
        color: #222;
      }
      span{
        width: 0.2rem;
        height: 0.2rem;
        transform:rotate(45deg);
        border: 0.02rem solid #414141;
        border-width:0.02rem 0.02rem 0 0;

      }
    }
    .detailMess{
      p{
        font-size: 0.3rem;
        color: #646464;
        padding: 0.3rem 0 0.15rem 0;
      }
      .up{
        width: 0.6rem;
        display: block;
        margin: 0 auto 0.2rem;
        height: 0.6rem;

      }
    }
    .drowRule{
      border-bottom: 0.16rem solid #efeff4;
      padding:0.05rem 0.15rem 0.2rem;
    }
    .comments{
      border-bottom:0.18rem solid #f0f0f3;
      background: #fff;
      h1{
        font-size: 0.28rem;
        color: #81838E;
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: left;
        padding-left: 0.2rem;
        .borderBFu(#e3e3e3);
      }
      .commentsItem{
        padding:0 0.2rem;
        .borderBFu(#e3e3e3);
        .comHead{
          display: flex;
          justify-content:space-between;
          height: 0.5rem;
          line-height: 0.5rem;
          .star{
            display: flex;
            span{
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.15rem 0.05rem;
              background: url(../assets/image/carProduct/star.png) no-repeat;
              background-size: 0.2rem 0.2rem;
            }
          }
          .userName{
            font-size: 0.2rem;
          }
        }
        .comMain{
          padding:0.1rem 0;
          .conTitle{
            text-align: left;
            font-size: 0.3rem;
            color: #1a1a1b;
          }
          .comImg{
            font-size: 0;
            text-align: left;
            img{
              width: 1.75rem;
              height: 1.75rem;
              border-radius: 0.2rem;
              padding: 2% .1rem;
              box-sizing: border-box;
            }
          }
          .replayCom{
            width: 96%;
            padding: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.1rem auto;
            color: #999;
            background: #dddddd;
            font-size: 0.3rem;
            text-align: left;
            position: relative;
            span{
              border:0.2rem solid #ddd;
              border-width: 0.2rem 0.2rem 0 0;
              transform:rotate(45deg);
              position: absolute;
              top: -0.1rem;
              left: 0.4rem;
              background: #ddd;
            }
          }
        }
        .comFooter{
          padding: 0.1rem 0 0.2rem 0;
          p{
            font-size: 0.25rem;
            text-align: left;
          }
        }
      }
    }
    .allComments{
      width: 2.8rem;
      height: 0.6rem;
      line-height: 0.67rem;
      font-size: 0.26rem;
      .borderFu(#ababab,1.2rem);
      border-radius: 0.6rem;
      margin: 0.2rem auto 0.2rem;
      color: #666;
    }
    .noComment{
      padding: 0.2rem 0;
      background: #efeff4;
      img{
        width: 1.03rem;
        height: 1.33rem;
        display: block;
        margin: 0 auto 0.3rem;
      }
      p{
        font-size: 0.25rem;
        color: #999;
        padding: 0.05rem 0;
      }
    }
  }
  .allMainActive{
    padding-top: 1.74rem;
  }
  .footer{
    height: 1rem;
    display: flex;
    align-items:center;
    position: fixed!important;
    bottom: 0;
    width: 7.5rem;
    color: #fff;
    font-weight: 400;
    .borderTFu(#f8f8f8);
    background: #fff;
    z-index: 500;
    .toPay{
      height: 1rem;
      line-height: 1rem;
      width:2.5rem;
      font-size: 0.3rem;
      background: url(../assets/image/carProduct/down.png) no-repeat;
      background-size: 2.5rem 1rem;
    }
    img{
      width: 0.44rem;
      height: 0.44rem;
      display:block;
      margin: 0.28rem auto;
    }
    .addShop{
      height: 1rem;
      line-height: 1rem;
      width: 2.5rem;
      font-size: 0.3rem;
      background: url(../assets/image/carProduct/shopcar.png) no-repeat;
      background-size: 2.5rem 1rem;
      
    }
    .addShop,.toPay{
      color: #fff;
      h1{
        font-size:0.26rem;
        height: 0.35rem;
        line-height: 0.35rem;
      }
      p{
        font-size: 0.26rem;
        margin: 0.15rem 0 0.05rem 0; 
        height: 0.35rem;
        line-height: 0.35rem;
        span{
          font-size: 0.36rem;
        }
      }
    }
    .noFree{
      h1{
        font-size:0.3rem;
        height: 1rem;
        line-height: 1rem;
      }
    }
    .nohasGroupVoucher{
      background: #BBBBBB;
    }
    .noGroupVoucher{
      width:5rem;
      background: #BBBBBB;
    }
    a{
      width: 17%;
      height: 1rem;
    }
    .shopCart{
      height: 1rem;
      .borderLFu(#f8f8f8);
      width: 17%;
      position: relative;
      span{
        font-size: 0.2rem;
        position: absolute;
        border-radius: 50%;
        top:0.1rem;
        right: 0.2rem;
        z-index: 99;
        color: #fff;
        display: flex;
        background: #ec2121;
        justify-content: center;
        align-items:center;
      }
    }
  }
  .popRule{
    background: #fff;
    .popHead{
      display: flex;
      align-items:flex-start;
      padding: 0.2rem;
      position: relative;
      .borderBFu(#ede9e9);
      .popHLeft{
        img{
          width: 2rem;
          display: block;
          height: 1.6rem;
        }
      }
      .popHCenter{
        width: 60%;
        text-align: left;
        padding-left: 0.2rem;
        h1{
          font-size: 0.35rem;
          height: 0.8rem;
          line-height: 0.8rem;
          color: #ec2121;
        }
        p{
          margin-top: 0.2rem;
          font-size: 0.25rem;
        }
      }
      .popHRight{
        position: absolute;
        top:-0.3rem;
        right: 0.2rem;
        img{
          width: 0.54rem;
          height: 0.54rem;
        }
      }
    }
    .popMain{
      .rule{
        .borderBFu(#ede9e9);
        padding:0 0 0.2rem 0;
        p{
          font-size: 0.25rem;
          text-align: left;
          padding: 0.1rem 0.2rem;
          color: #666666;
        }
        .ruleDetail{
          display: flex;
          padding: 0 0.2rem;
          flex-wrap:wrap;
          span{
            font-size: 0.22rem;
            padding: 0.1rem 0.15rem;
            margin:0.07rem 0.1rem;
            background: #f5f5f5;
            border-radius:0.15rem;
            color:#272727;
          }
          .activeSpan{
            background: #ec2121;
            color:#fff;
          }
        }
      }
      .number{
        padding: 0.2rem 0;
      }
    }
    .popFooter{
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #fff;
      background: #ec2121;
    }
  }
}
</style>